<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Title</title>

    <!-- jquery库 -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <!-- 自己写的css文件 -->
    <link rel="stylesheet" type="text/css" href="../css/background1.css">

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- 可选的Bootstrap主题文件（一般不使用） -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="/home">个人博客</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="/home">主页</a>
                        </li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">博文<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="/writingArticle">写博文</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="/articleList">文章列表</a>
                                </li>
                            </ul>
                        </li>

                        <li>
                            <a href="#">待开发</a>
                        </li>

                    </ul>
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" />
                        </div> <button type="submit" class="btn btn-default">搜索（待开发）</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">链接（待开发）</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">我的账号<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">待开发</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="/logout">登出账号</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>

            </nav>
        </div>
    </div>



    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="title" class="col-sm-1 control-label">题目</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="title" placeholder="请输入题目">
            </div>
        </div>
        <div class="form-group">
            <label for="author" class="col-sm-1 control-label">作者</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="author" placeholder="请输入作者">
            </div>
        </div>
        <div class="form-group">
            <label for="time" class="col-sm-1 control-label">时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="time" readonly="readonly">
            </div>
        </div>

        <div class="form-group">
            <label for="note" class="col-sm-1 control-label">备注</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="note" placeholder="请输入备注（可不填）">
            </div>
        </div>

        <div class="form-group">
            <label for="details" class="col-sm-1 control-label">文本框</label>
            <div class="col-sm-10">
                <textarea class="form-control" id="details" rows="15"></textarea>
            </div>
        </div>


        <div class="form-group">
            <div class="col-sm-offset-10 col-sm-2">
                <button type="button" class="btn btn-default" onclick="submitArticle()">提交</button>
            </div>
        </div>
    </form>



</div>




<!-- 自定义js执行函数 -->
<script>

    date = new Date(); //创建时间对象


    //初始化方法，这里主要用来获取方法
    $(document).ready(function (){
        // date = new Date(); //创建时间对象

        console.log(date);

        var year = date.getFullYear(); //获取年
        var month = date.getMonth()+1;//获取月
        var day = date.getDate(); //获取当日
        var hour=date.getHours();       //获取当前小时数(0-23)
        var minute=date.getMinutes();     //获取当前分钟数(0-59)
        var second=date.getSeconds();

        var showTime = year+"年"+month+"月"+day + '日' + ' ' + hour+"时"+minute+"分"+second + '秒';//作为全局变量

        $('#time').val(showTime);
        // alert(time);
    });

    //提交博文
    function submitArticle(){

        //这里date是全局变量，为了保持和上面显示的时间一致，所以不写
        var title = document.getElementById("title").value;
        var author = document.getElementById("author").value;
        var note = document.getElementById("note").value;
        var details = document.getElementById("details").value;

        if (title.length == 0)
        {
            alert('题目不能为空');
        }else if(author.length == 0){
            alert('作者不能为空');
        }else if(note.length == 0){
            alert('备注不能为空');
        }else if(details.length == 0){
            alert('内容不能为空');
        }else{
            var data = {
                //json格式
                "title":title, "author":author,
                "date":date, "note":note,
                "details":details
            };

            //JSON.stringify(data) 从data中解析出字符串
            console.log(JSON.stringify(data));

            $.ajax({
                type: "post",
                // ..代表的应该是 http://localhost:8080
                url: "../submitArticle",
                data: JSON.stringify(data),
                contentType : 'application/json;charset=utf-8',
                dataType: "json",
                async:false,

                // //key/value格式
                // data: 'username=ha&password=123',
                success: function(data){
                    console.log(data)
                    if (data.result){
                        window.location.href = data.url;
                        alert("提交成功！！");
                    }else {
                        alert("提交失败！！");
                    }
                }
            });
        }
    }


</script>
</body>
</html>